<template>
   <view class="bg-top" style="height: 420rpx;">
    <view class="auth-header">
      <text class="auth-title">浙享物联</text>
      <text class="auth-subtitle">您好, 欢迎登录</text>
    </view>
  </view>
  <view class="loading-container" v-if="isLoading">
    <view class="loading-text">正在登录...</view>
  </view>
  <view class="content">
    <!-- 登录表单区域 -->
    <view class="auth-form">
      <!-- 用户名输入 -->
      <view class="form-group">
        <uni-easyinput
          v-model="username"
          placeholder="账号"
          prefix-icon="person"
          :styles="inputStyles"
          :inputBorder="false"
        ></uni-easyinput>
      </view>

      <!-- 密码输入 -->
      <view class="form-group">
        <uni-easyinput
          type="password"
          v-model="password"
          placeholder="密码"
          prefix-icon="locked"
          :styles="inputStyles"
          :inputBorder="false"
          @confirm="handleLogin"
        ></uni-easyinput>
      </view>

      <!-- 记住密码选项 -->
      <view class="form-options form-group">
        <label class="option-item">
          <checkbox
            :checked="remember"
            @click="remember = !remember"
            color="#1890ff"
          />
          <text class="option-text">记住密码</text>
        </label>
      </view>
      
      <!-- 登录按钮 -->
      <button
        class="auth-button"
        :class="{ disabled: !canLogin }"
        :disabled="!canLogin"
        @click="handleLogin"
      >
        登 录
      </button>
    </view>
  </view>
  
  <!-- 底部用户协议勾选 -->
  <view class="bottom-agreement">
    <label>
      <checkbox :checked="agreedTerms" @click="agreedTerms = !agreedTerms" color="#1890ff" />
      <text class="agreement-text">已阅读并同意《用户服务协议》</text>
    </label>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import { useMemberStore, useDictStore } from '@/stores'
import { login, getInfo } from '@/api/login'

const savedUserInfo = uni.getStorageSync("savedUserInfo");
const username = ref(savedUserInfo.username || '');
const password = ref(savedUserInfo.password || '');
const remember = ref(true);

// 输入框样式配置
const inputStyles = ref({
  color: "#333",
  borderColor: "transparent",
  backgroundColor: "#f8f8f8",
  borderRadius: "8px",
});

// 用户协议勾选状态
const agreedTerms = ref(false);

const canLogin = computed(() => {
  return username.value.trim().length > 0 && password.value.trim().length >= 6 && agreedTerms.value;
});

const isLoading = ref(false);

const handleLogin = async () => {
  if (!canLogin.value) {
    if (!agreedTerms.value) {
      uni.showToast({ title: '请先同意用户服务协议', icon: 'none' });
    }
    return;
  }
  
  // 执行登录逻辑
  isLoading.value = true;
  try { 
    const res = await login({ username: username.value, password: password.value })
    if(res.code == 0){
      if (remember.value) {
        uni.setStorageSync("savedUserInfo", {
          username: username.value.trim(),
          password: password.value.trim(),
        });
        const userStore = useMemberStore()
        const data = res.data
        userStore.setProfile(data)
        const info = await getInfo();
        userStore.setPermInfo(info.data)
        const dictStore = useDictStore()
        dictStore.setDict(info.data.wxDictList)
        uni.switchTab({
          url: "/pages/index/index",
        });
      } else {
        uni.removeStorageSync("savedUserInfo");
      }
    } else {
      uni.showToast({ title: JSON.stringify(res), icon: "error"});
    } 
  } catch (error) { 
    isLoading.value = false;
  } finally {
    isLoading.value = false;
  }
};

// 页面加载完成后的处理
onMounted(() => {
  // 页面加载完成后的初始化操作
});
</script>

<style lang="scss" scoped>
.bg-top {
  height: 420rpx;
  background: #3399ff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

  .auth-header {
    display: flex;
    flex-direction: column;
     margin-bottom: 100rpx;
    .auth-title {
      font-size: 48rpx;
      font-weight: bold;
      color: #fff;
    }
    .auth-subtitle {
      font-size: 28rpx;
      color: #fff;
    }
  }
}

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  .loading-text {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
  }
}

.content {
  margin-top: -50rpx;
  height: calc(100vh - 450rpx - 100rpx); /* 减去底部协议的高度 */
  /* 认证头部 */
  .auth-header {
    margin-bottom: 100rpx;
    .auth-title {
      display: block;
      font-size: 48rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 16rpx;
    }
    .auth-subtitle {
      font-size: 28rpx;
      color: #999;
    }
  }

  /* 认证表单 */
  .auth-form {
    width: 100%;
    height: 100%;
    border: 1rpx solid rgb(232, 236, 238);
    border-bottom: 0; /* 覆盖底部边框 */
    border-radius: 45rpx;
    background-color: #ffffff; //ffffff
    .form-group {
      margin: 50rpx 38rpx;
      margin-bottom: 30rpx;
      :deep(.uni-easyinput) {
        border-radius: 20rpx !important;
        overflow: hidden;
      }
      .form-label {
        display: block;
        font-size: 28rpx;
        color: #eef3f3;
        margin-bottom: 20rpx;
        height: 50rpx;
      }
    }

    .form-options {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 60rpx;

      .option-item {
        display: flex;
        align-items: center;

        .option-text {
          font-size: 26rpx;
          color: #666;
          margin-left: 10rpx;
        }
      }
    }
    .auth-button {
      width: 90%;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 34rpx;
      font-weight: 500;
      color: #fff;
      background: linear-gradient(to bottom, #3399ff, #2b7ed1);
      border-radius: 18rpx;
      margin-bottom: 40rpx;
      border: none;
      box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
      transition: all 0.3s;

      &.disabled {
        opacity: 0.6;
        box-shadow: none;
      }
      &:active {
        transform: translateY(2rpx);
      }
    }

    .security-tips {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;

      .tips-text {
        font-size: 24rpx;
        color: #999;
        margin-left: 8rpx;
      }
    }
  }

  ::v-deep .uni-easyinput__content-input {
    width: auto;
    position: relative;
    overflow: hidden;
    flex: 1;
    line-height: 1;
    font-size: 14px;
    height: 47px;
    border-radius: 10rpx;
  }
}

/* 底部协议勾选框样式 */
.bottom-agreement {
  position: fixed;
  bottom: 50rpx;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
  background-color: transparent;
}

.agreement-text {
  font-size: 24rpx;
  color: #666;
  margin-left: 8rpx;
}
</style>